<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
</head>
<body>
    <div id="app">
        官方网站：
        <a href="https://router.vuejs.org/zh/installation.html">
            https://router.vuejs.org/zh/installation.html
        </a>

        <br>
        <!-- 跳转到/login,router-link默认渲染为一个a标签 -->
        <router-link to="/login">跳转到登陆</router-link>

        <router-view></router-view>
    </div>

    <template id="loginTemplate">
        <div>
            登陆组件的模板
        </div>
    </template>

    <script>
        var myTemplate = Vue.component('login',{
            template:"#loginTemplate"
        })


        /**
         * 1.创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有一个路由的构造函数，叫VueRouter
         */

        var router = new VueRouter({
            //这个配置对象中的route表示：路由匹配规则
            routes:[
                /**
                 * 每个路由规则中，都是一个对象，这个规则对象，必须有2个属性
                 * 1.path：表示监听哪个路由的地址
                 * 2.component：表示路由是前面匹配到的path，则展示component属性对应的组件
                 */
                {
                    path:'/login',
                    component:myTemplate                //注：component的属性值必须是一个组件模板对象，不能是组件引用的名称
                },
                {
                    path:"/",
                    redirect:"/login"         //重定向，强制重定向到/login里
                }
            ]
        })

        var vm = new Vue({
            el:"#app",
            data:{},
            methods:{},
            /**
             * 2.将路由规则对象注册到vm实例上
             */
            router:router
        })
    </script>
</body>
</html>